<template>
	<view class="u-padding-20">
		<view class="detail_con u-padding-20">
			<view>订单号：{{detail.code}}</view>
			<view>创建时间：{{detail.create_time}}</view>
		</view>
		<view class="detail_con u-padding-20 u-rela">
			<view v-if="detail.status==0" style="color:#007AFF;" class="u-abso dis_inl_blo pos_right pos_top">
				{{detail.status_label}}
			</view>
			<view v-if="detail.status==1" style="color:#18B566;" class="u-abso dis_inl_blo pos_right pos_top">
				{{detail.status_label}}
			</view>
			<view v-if="detail.status==2" style="color:#ff5500;" class="u-abso dis_inl_blo pos_right pos_top">
				{{detail.status_label}}
			</view>
			<view v-if="detail.status==-1" style="color:#aa0000;" class="u-abso dis_inl_blo pos_right pos_top">
				{{detail.status_label}}
			</view>
			<view>联系人：{{detail.name}}</view>
			<view v-if="detail.house">房间号：{{detail.house}}</view>
			<view class="phone_con u-rela">
				<text>联系方式：{{detail.tel}}</text>
				<u-icon style="top:5rpx;" class="u-abso pos_right" color="#008b00" name="phone-fill" size="40rpx" @click="makephone(detail.tel)"></u-icon>
			</view>
			<view v-if="detail.name1">临时联系人：{{detail.name1}}</view>
			<view v-if="detail.tel1" class="phone_con u-rela">
				<text>临时电话：{{detail.tel1}}</text>
				<u-icon style="top:5rpx;" class="u-abso pos_right" color="#008b00" name="phone-fill" size="40rpx" @click="makephone(detail.tel1)"></u-icon>
			</view>
		</view>
		<view class="detail_con u-padding-20">
			<view>报修类型：{{detail.type}}</view>
			<view>预约时间：{{detail.time}}</view>
			<view>报修内容：</view>
			<view style="line-height: 45rpx;">{{detail.content}}</view>
			<view v-if="detail.images.length>0">图片：</view>
			<view v-if="detail.images.length>0" class="pic_con u-text-center">
				<image v-for="(item,index) in detail.images" :src="item"></image>
			</view>
		</view>
		<!-- 工单详情 -->
		<view v-if="detail.status!=0" class="detail_con u-padding-20 u-rela">
			<view v-if="examine.status==0" style="color:#007AFF;" class="u-abso dis_inl_blo pos_right pos_top">
				待报价
			</view>
			<view v-if="examine.status==2" style="color:#aa0000;" class="u-abso dis_inl_blo pos_right pos_top">
				待支付
			</view>
			<view v-if="examine.status==3" style="color:#ff5500" class="u-abso dis_inl_blo pos_right pos_top">
				处理中
			</view>
			<view v-if="examine.status==1" style="color:#18B566;" class="u-abso dis_inl_blo pos_right pos_top">
				已完成
			</view>
			<view style="color:#0c838b;">工单详情</view>
			<view>接单人称呼：{{examine.engineer}}</view>
			<view>进度时间：{{examine.examine_new_time}}</view>
			<!-- 报价信息展示 -->
			<view v-if="examine.status!=0">
				<view v-if="detail.rType.type == 0" style="padding:10rpx 0;">报价：{{examine.offer_price}}</view>
				<view v-if="detail.rType.type == 0" style="padding:10rpx 0;">报价简述：{{examine.offer_memo}}</view>
				<view v-if="detail.rType.type == 0 && examine.offer_image.length>0" style="padding:10rpx 0;">报价图片证明：</view>
				<view v-if="detail.rType.type == 0 && examine.offer_image.length>0" style="padding:10rpx 0;" class="pic_con u-text-center">
					<image v-for="(item,index) in examine.offer_image" :src="item"></image>
				</view>
				<view v-if="detail.uid==0 && examine.status ==2" style="padding:10rpx 0;">业主扫码确认：</view>
				<view v-if="detail.uid==0 && examine.status ==2" class="dis_inl_blo" style="padding:10rpx 0;margin-left: 200rpx;">
					<u-qrcode ref="qrcode" canvas-id="qrcode" size="120":value="detail.id"></u-qrcode>
				</view>
				<!-- <button v-if="detail.uid==0 && examine.status ==2 " class="u-margin-top-30 u-margin-bottom-30 btn_con" @click="birthcode">生成二维码</button> -->
			</view>
			<!-- 维修反馈信息展示 -->
			<view v-if="examine.status==1">
				<view style="padding:10rpx 0;color:#0c838b;">维修反馈</view>
				<view style="padding:10rpx 0;">维修反馈简述：{{examine.complete_memo}}</view>
				<view v-if= "examine.complete_image.length>0" style="padding:10rpx 0;">反馈图片：</view>
				<view v-if="examine.complete_image.length>0" style="padding:10rpx 0;" class="pic_con u-text-center">
					<image v-for="(item,index) in examine.complete_image" :key="index" :src="item"></image>
				</view>
			</view>
			<view class="u-rela" v-if="detail.status==2 && examine.status == 3" style="width:100%;">
				<text class="dis_inl_blo circle"></text>
				<text style="color:#555;">当日是否完成维修</text>
				<view class="u-abso pos_right" style="top:5rpx" :disabled="true" v-if="examine.un_complete_memo!=''">
					<u-switch v-model="checked" active-value="1" inactive-value="0" activeColor="#006971" size="35" @change="switchbtn"></u-switch>
				</view>
				<view class="u-abso pos_right" style="top:5rpx" v-if="examine.un_complete_memo==''">
					<u-switch v-model="checked" active-value="1" inactive-value="0" activeColor="#006971" size="35" @change="switchbtn"></u-switch>
				</view>
				
				<view v-if="examine.is_complete==0 && examine.un_complete_memo!=''" style="margin-top:20rpx;color:#666;">未完成原因：{{examine.un_complete_memo}}</view>
			</view>
			<view class="u-rela" v-if="detail.status==1" style="width:100%;">
				<text class="dis_inl_blo circle"></text>
				<text style="color:#555;">当日是否完成维修</text>
				<view class="u-abso pos_right" style="top:5rpx" :disabled="true" v-if="examine.un_complete_memo!=''">
					<u-switch v-model="checked" active-value="1" inactive-value="0" activeColor="#006971" size="35" @change="switchbtn"></u-switch>
				</view>
				<view class="u-abso pos_right" style="top:5rpx" v-if="examine.un_complete_memo==''">
					<u-switch v-model="checked" active-value="1" inactive-value="0" activeColor="#006971" size="35" @change="switchbtn"></u-switch>
				</view>
				<view v-if="examine.is_complete==0 && examine.un_complete_memo!=''" style="margin-top:20rpx;color:#666;">未完成原因：{{examine.un_complete_memo}}</view>
			</view>
		</view>
		<u-popup v-model="show" mode="center" width="500rpx;" borderRadius="10">
			<view class="noConplete u-padding-20">
				<view>请描述完成/未完成情况：</view>
			    <textarea v-model="un_complete_memo" value="" placeholder="简述完成/未完成情况" />
				<button class="btn_con1 margin_auto u-margin-top-20" @click="sureSubmit">确认提交</button>
			</view>
		</u-popup>
		<!-- 报价内容 -->
		<view v-if="detail.status==2 && examine.status == 0 && detail.rType.type == 0" class="detail_con u-padding-20">
			<view style="color:#0c838b;">报价内容</view>
			<view class="price_con u-rela">
				<text>报价：</text>
				<input v-model="price" style="right:40rpx;" class="u-abso pos_top" type="text" placeholder="输入金额">
				<text style="right:0;" class="u-abso pos_right pos_top">元</text>
			</view>
			<view class="price_intro u-margin-top-30">
				<textarea v-model="memo" value="" placeholder="请简单描述" />
			</view>
			<view class="uni-flex-center">
				<view class="main-service uni-cell-90">
					<view class="user-list">
						<view style="padding-bottom: 10rpx;">
							<view style="margin-top: 20rpx;">
								<view>上传图片：</view>
								<u-upload :action="action" @on-change="changeimg" @on-success="successimg" on-remove="deletePic" :file-list="fileList" maxCount="9"></u-upload>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<button v-if="detail.status==2 && examine.status == 0" class="u-margin-top-60 u-margin-bottom-80 btn_con" @click="offerRepair(detail.id)">报价</button>
		<button v-if="detail.status==2 && examine.status == 2" class="u-margin-top-60 u-margin-bottom-80 btn_con">等待支付</button>
		<!-- 3 -->
		<button v-if="detail.status==2 && examine.status == 3" class="u-margin-top-60 u-margin-bottom-80 btn_con" @click="completeRepair(detail.id,detail.rType.type)">标记完成</button>
		
		<!-- 弹框提示 -->
		<!-- <u-toast ref="uToast" /> -->
	</view>
</template>

<script>
	import {
		getRepairDetail,
		offerRepair,
		unCompleteRepair
	} from "@/service/repairService.js";
	export default {
		data () {
			return {
				id:0,
				detail:{},
				examine:{},
				fileList: [],
				images:[],
				price:'',
				memo:'',
				action:'https://admin.gslhzhwy.com/api/upload/file',
				checked: true,
				disabled:false,
				isSwitch:1,
				show:false,
				un_complete_memo:''
			}
		},
		onLoad(options) {
			this.id=options.id;
			getRepairDetail({id: options.id}).then(this.getDetail)
			
		},
		methods:{
			getDetail(e) {
				let list;
				if(e.code == 200){
					list = e.result;
				}
			
				this.detail = list;
				this.examine=list.examine
				if(list.examine && list.examine.is_complete==0){
					this.checked=false,
					this.disabled=true
				}else{
					this.checked=true
				}
			},
			makephone:function(phone){
				uni.makePhoneCall({
					phoneNumber:phone,
					success(e) {
						// console.log(e);
					}
				})
			},
			changeimg:function(e){
				// console.log(e);
			},
			successimg:function(e){
				if (e.code == 1) {
					this.images.push(e.data.url);
				}
			},
			// 删除图片
			deletePic(event) {
				this.images.splice(event.index,1);
			},
			birthcode(){
				
			},
			offerRepair:function(id){
				// console.log(this.images)
				offerRepair({
					id: id,
					price:this.price,
					memo:this.memo,
					image:this.images
				}).then(res=>{
					if(res.code==200){
						uni.showToast({
							title:'报价成功,耐心等待支付！',
							icon:'none',
							duration:2000
						})
						// this.$refs.uToast.show({
						// 	type: 'success',
						// 	title: '报价成功,耐心等待支付！',
						// 	icon:false
						// })
						getRepairDetail({id: this.id}).then(this.getDetail)
						
					}else{
						uni.showToast({
							title:res.msg,
							icon:'error',
							duration:2000
						})
						// this.$refs.uToast.show({
						// 	type: 'error',
						// 	title: res.msg,
						// 	icon:false
						// })
					}
					
				})
			},
			switchbtn:function(e){
				this.isSwitch=e;
				this.show=true
				// if(e==0){
				// 	this.show=true
				// }
			},
			sureSubmit:function(){
				unCompleteRepair({
					id: this.id,
					un_complete_memo:this.un_complete_memo,
					is_complete:this.isSwitch
				}).then(res=>{
					if(res.code==200){
						uni.showToast({
							title:'提交成功',
							icon:'success',
							duration:2000
						})
						// this.$refs.uToast.show({
						// 	type: 'success',
						// 	title: '提交成功',
						// 	icon:false
						// })
						this.show=false
					}else{
						uni.showToast({
							title:res.msg,
							icon:'error',
							duration:2000
						})
						// this.$refs.uToast.show({
						// 	type: 'error',
						// 	title: res.msg,
						// 	icon:false
						// })
					}
					
				})
			},
			completeRepair:function(id,type){
				uni.navigateTo({
					url:'./completeRepair?id='+id+'&type='+type
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.detail_con{
		box-shadow: 0 0 15rpx #ddd;
		margin-bottom: 20rpx;
		border-radius: 15rpx;
	}
	.detail_con>view{
		padding:10rpx 0;
	}
	.phone_con image{
		top:-10rpx;
		width:60rpx;
		height:60rpx;
		vertical-align: top;
	}
	.pic_con image{
		width:30%;
		height:120rpx;
		margin:0 10rpx 10rpx;
	}
	.price_con input{
		width:200rpx;
		padding:0 10rpx;
		text-align: center;
		border-radius: 10rpx;
		font-size: 26rpx;
		border:1rpx solid #ddd;
	}
	.price_intro textarea{
		width:93%;
		height:150rpx;
		padding:20rpx;
		border-radius: 10rpx;
		font-size: 26rpx;
		border:1rpx solid #ddd;
	}
	.circle{
		width:15rpx;
		height:15rpx;
		margin-right:20rpx;
		text-align: center;
		border-radius: 50%;
		background-color: #0c838b;
	}
	.noConplete textarea{
		width:96%;
		padding:10rpx;
		height:150rpx;
		margin-top:20rpx;
		overflow: hidden;
		border:1rpx solid #ddd;
	}
	.btn_con{
		height:70rpx;
		line-height: 70rpx;
		font-size: 30rpx;
		border-radius: 35rpx;
		background-image: url('https://resourse.cnlhjt.com/upload/20220825/d1aa35c1d129137d9b12c8f34e59c5bc.png');
		background-size: 100% 70rpx;
		color:#fff;
	}
	.btn_con1{
		line-height: 60rpx;
		width:90%;
		height:60rpx;
		color:#fff;
		font-size: 28rpx;
		border-radius: 30rpx;
		background-image: url('https://resourse.cnlhjt.com/upload/20220825/d1aa35c1d129137d9b12c8f34e59c5bc.png');
		background-size: 100% 60rpx;
		 /* background-color: #006971; */
	}
</style>
